<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">

        <banner></banner>

        <my-lsp></my-lsp>
        
        <div id="nav"></div>
        <mynav></mynav>

    </div>

</body>
<script>
    const banner = {
        template: "<div> 这是我的自定义的banner-轮播图组件 </div>"
    }
    Vue.component("banner", banner)

    const islsp = {
        template:"<p>are you lsp</p>"
    }
    Vue.component("myLsp",islsp)


    const nav = Vue.extend({
        template:"<p>so what</p>"
    })
    new nav().$mount("#nav")
    
    Vue.component("mynav",nav)


    const vm = new Vue({
        data: {
            title: "组件的注册02"

        },
        methods: {

        },
        mounted() {
            document.querySelectorAll("title")[0].innerHTML = this.title
        }

    }).$mount("#app")
</script>

</html>